/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 上，左，直角管道
 * CopyRight:
 **/
import React, {Component} from 'react';

import './index.css';

export default class UpLeftAnglePipe extends Component {
  constructor(props) {
    super(props);
    console.log('UpLeftAgnlePipe props,', this.props);
    /*
     * * props 参数说明
     * x：相对位置x坐标
     * y: 相对位置y坐标
     * width： 宽度
     * height：高度
     * color: 水流颜色
     * 管道的默认颜色 #949494
     * 水流的默认颜色 #1830fb
     * state状态表示，开关是否打开
     * */
    this.state = {
      fill: this.props.fill ? this.props.fill : false,
    };
  }

  render() {
    return (
      <svg className="UpLeftAngleBox" label={this.props.label ? this.props.label : 'UpLeftAngle'} x={ this.props.x ? this.props.x : '1600'} y={ this.props.y ? this.props.y : '600'} width={ this.props.width ? this.props.width : '100'} height={ this.props.height ? this.props.height : '100'}>
        <svg className="UpLeftAngleContent" viewBox='0 0 100 100'>
          <path d='M0,30 A30,30 0 0 0 30,0 L70,0 A70,70 0 0 1 0,70 Z' fill="#949494">
          </path>
          <g style={{ display: this.state.fill ? 'block' : 'none'}}>
            <path d='M0,40 A40,40 0 0 0 40,0 L60,0 A60,60 0 0 1 0,60 Z' fill={ this.props.color ? this.props.color : "#1830fb"}>
            </path>
          </g>
        </svg>
      </svg>
    )
  }
}

